import React, { Component } from 'react'
import { 
  Row, Col, Card, Form, 
  Input, Button, Checkbox,
  Spin
} from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {connect} from 'react-redux'
import {loginAsync} from '../action'
class Login extends Component {
  onFinish = (values) => {
    console.log('Received values of form: ', values);
    let { loginAsync} = this.props  //提取状态机中的异步action方法
    loginAsync(values,this.props.history)  //写到用户账号密码，触发异步action
  }
  render() {
    console.log('Login组件',this.props);
    let {isLoading} = this.props.userReducer  //提取状态机中的用户登录状态信息
    return (
      <Spin spinning={isLoading}>
        <Row style={{marginTop:'150px'}}>
          <Col span={6} offset={9}>
            <Card title="请登录" extra={<span>去注册</span>}>
              <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                  username: '张无忌',
                  password: '123'
                }}
                onFinish={this.onFinish}
              >
                <Form.Item
                  name="username"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your Username!',
                    },
                  ]}
                >
                  <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                </Form.Item>
                <Form.Item
                  name="password"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your Password!',
                    },
                  ]}
                >
                  <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="Password"
                  />
                </Form.Item>
                <Form.Item>
                  <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>Remember me</Checkbox>
                  </Form.Item>
                </Form.Item>

                <Form.Item>
                  <Button type="primary" htmlType="submit" className="login-form-button">
                    登录
                  </Button>
                </Form.Item>
              </Form>
            </Card>
          </Col>
        </Row>
      </Spin>
    )
  }
}
const mapStateToProps = (state)=>{ //state就是状态机提供的所有数据
  return state
}
export default connect(mapStateToProps, { 
  loginAsync
})(Login)
